"use client"
import { Button } from "@/components/ui/button";
import Image from "next/image";
import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api";
import { useOrganization } from "@clerk/nextjs";
import { useApiMutation } from "@/hooks/use-api-mutation";
import { toast } from "sonner";
import router from "next/router";



export const EmptyBoards=()=>{
    const {organization} = useOrganization();
    const {mutate,pending}=useApiMutation(api.board.create);

    const onClick = () => {
        if (!organization) return;
      
        mutate({
          orgId: organization.id,
          title: "Untitled"
        })
        .then((id)=>{
            toast.success("Board created!");
            router.push(`/boards/${id}` );
            //TODO: Redirect to board page
        })
        .catch((error)=>{
            toast.error("Something went wrong");
        })
      };



    return (
        <div className="flex flex-col items-center justify-center h-full">
            <Image
            src="note.svg"
            height={110}
            width={110}
            alt="Empty Search"
            />
            <h2 className="text-2xl font-semibold mt-6">
                Create your first board!
            </h2>
            <p className="text-muted-foreground textg-sm mt-2">
                Start by creating a new board for your organization.
            </p>
            <div className="mt-6">
                <Button disabled={pending} onClick={onClick} size={"lg"}>
                    Create borad
                </Button>
            </div>
        </div>
    )
}